<template>
   <div class="page-box">
      <div class="page-title">
         {{ "用户操作日志" }}
      </div>

      <div class="page-search">
         <div
            class="search-box"
            :style="{ height: IsHeight }"
         >
            <el-input
               v-model="search"
               placeholder="操作人/操作行为/操作详情"
               style="width: 240px; margin-right: 10px; margin-bottom: 10px"
               suffix-icon="Search"
            />
         </div>

         <div class="search-btn">
            <div
               class="btn_item"
               @click="handleClickHeight"
            >
               <img
                  class="btn_img"
                  src="@/assets/sx.png"
                  alt=""
               />
               <span> 高级筛选 </span>
            </div>
            <div class="btn_item">
               <img
                  class="btn_img"
                  src="@/assets/dc.png"
                  alt=""
               />
               <span> 导出 </span>
            </div>
         </div>
      </div>
   </div>

   <div class="table-box">
      <el-table
         :data="tabeData"
         style="width: 100%"
         v-loading="loading"
         border
      >
         <el-table-column
            align="center"
            fixed
            prop="admin_nickname"
            label="操作人"
            width="100"
         />
         <el-table-column
            align="center"
            prop="admin_mobile"
            label="操作电话"
            width="240"
         />
         <el-table-column
            align="center"
            prop="updated_at"
            label="操作时间"
            width="240"
         >
         </el-table-column>

         <el-table-column
            align="center"
            prop="category_name"
            label="操作行为"
            width="240"
         >
         </el-table-column>

         <el-table-column
            align="center"
            prop="carport_district_count"
            label="操作详情"
            width="auto"
         />
      </el-table>
   </div>

   <!-- 分页 -->
   <Pagination
      class="pagination"
      @pageSize="pageSize"
      @getPage="getPage"
      :page="pageData.page"
      :page-size="pageData.page_size"
      :total="total"
   />

   <Dialog />
</template>

<script setup lang="ts">
   import { ref, onMounted, watch } from "vue";
   import { useRouter } from "vue-router";
   import { usePlatformManagementStore } from "@/stores";
   import Pagination from "@/components/Pagination.vue";
   const platformManagementStore = usePlatformManagementStore();
   const router = useRouter();
   import api from "@/api/index.js";
   import Dialog from "./components/dialog.vue";

   let IsHeight = ref<number | string>(0);

   const search = ref<string>("");

   const pageData = ref({
      page_size: 10,
      page: 1,
      house_type: "",
      category: "",
      keywords: "",
   });
   const total = ref(0);
   const tabeData = ref([]);
   // 侦听动态分页
   watch(
      () => {
         return pageData.value;
      },
      () => {
         getAlltabeData();
      },
      { deep: true }
   );

   let nub = ref<number>(0);
   const handleClickHeight = () => {
      nub.value++;
      if (nub.value % 2 == 1) {
         IsHeight.value = "40px";
      } else {
         IsHeight.value = "0px";
      }
   };

   const pageSize = (e: number) => {
      pageData.value.page_size = e;
   };
   const getPage = (e: number) => {
      pageData.value.page = e;
   };
   onMounted(() => {
      getAlltabeData();
   });

   // 获取门店列表
   const getAlltabeData = async () => {
      const res = await api.authority.getOperationLogList({
         ...pageData.value,
      });
      if (res.code == 200) {
         tabeData.value = res.data.data;
         total.value = res.data.pager.page_count;
      }
   };

   const loading = ref(false);

   // 跳转区域管理
   const handleClick = (row) => {
      platformManagementStore.setShopInfo(row);
      router.push({
         name: "RegionView",
      });
   };
</script>

<style lang="scss" scoped>
   .btn-box {
      display: flex;
      align-items: center;
      justify-content: center;
   }

   // 输入框样式
   ::v-deep .el-input__wrapper {
      background-color: rgba(250, 252, 251, 1);
   }

   //表格样式

   ::v-deep .el-table {
      --el-table-header-bg-color: rgba(235, 236, 240, 1);
   }

   ::v-deep .el-table thead {
      color: #444;
   }

   //分页样式
   .pagination {
      width: calc(100% - 250px);
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding-top: 10px;
      border-top: 1px solid #98989848;
   }

   ::v-deep .el-pagination.is-background .el-pager li.is-active {
      background-color: #000 !important;
   }
</style>
